<template>
  <div class="collect">
    <ul class="com">
      <li v-for="item in List" :key="item.id">
        <a>
          <collect-item
            :id="item.pid"
            :image="item.image"
            :price="item.price"
            :store_name="item.store_name"
            @del-item="delItem"
          ></collect-item>
        </a>
      </li>
    </ul>
    <my-recommend v-if="isGood"></my-recommend>
  </div>
</template>

<script>
import MyRecommend from "@/components/recommend/Recommend.vue";
import CollectItem from "@/views/collect/CollectItem.vue";


export default {
  name: "Collect",
  data() {
    return {
      List: [],
      isGood: true,
    };
  },
  computed: {},
  watch: {
    List:{
      immediate:true,
      deep:true,
      handler(val){
        if(val.length == 0){
          this.isGood = true
        }else{
          this.isGood = false
        }
        
      }
    }
  },
  created() {
    this.initUser();
  },
  methods: {
    initUser() {
      let url = "/api/collect/user";
      let token = localStorage.getItem('token')
      let data = {
        page: 1,
        limit: 20,
      };
      let pro = axios({
        method: "get",
        url:url,
        params: data,
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          let { status , data} = res.data
          if(status == 200){
            this.List = data
          }
          console.log("用户收藏数据获取成功", res.data);
        })
        .catch((err) => {
          console.log("用户收藏数据回去失败");
        });
    },

    delItem(obj){
      this.List.some((item,index)=>{
        if(item.pid == obj.id){
          this.List.splice(index,1)
          return
        }
      })
    }
    
  },
  components: {
    MyRecommend,
    CollectItem,
  },
  mounted() {
    //   this.List =JSON.parse(localStorage.getItem('collection'))
    //   console.log(this.collection)
  },
};
</script>

<style lang="scss" scoped>
.com {
  background-color: #fff;
  li {
    a {
      padding-left: 15px;
      display: block;
    }
  }
}
</style>



